<template>
	<div style="padding: 50px;">
		<el-card>
			<div style="display: flex;">
				<div style="width: 300px;">
					<el-image :src="product.productImage" :preview-src-list="[product.productImage]" style="width: 100%;">
					</el-image>
				</div>
				<div style="flex: 1;padding-left: 50px;">
					<div class="item1"><h3>{{product.productName}}</h3></div>
					<div class="item1" style="font-size: 14px;">{{product.productDes}}</div>
					<div class="item1" style="color: orange;font-size: 20px;">价格￥{{product.productPrice}}</div>
					<div class="item1">库存：{{product.number}}</div>
					<div class="item1">
						<span style="font-size: 18px;">数量：</span>
						<el-input-number v-model="form.number" :min="1" :max="99"></el-input-number>
					</div>
					<div class="item1" style="margin-top: 60px;">
						<el-button size="medium" style="background-color: orangered;color: white;" @click="addCart">
							<i class="el-icon-shopping-cart-2"></i>
							加入购物车</el-button>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
export default{
	name:"ProductDetail",
	data(){
		return{
			id:this.$route.query.id,
			product:{},
			form:{
				userNo:0,
				number:1
			},
			
		}
	},
	created(){
		this.loadProductInfo();
	},
	methods:{
		loadProductInfo(){
			var url = "/api/product/selectProductById/" + this.id;
			this.$Request
				.fetch(url)
				.then((result) => {
					this.product = result.data;
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
		addCart(){
			this.form.productId = this.product.productId;
			this.form.userNo = this.$VuexStore.state.token.userNo;
			//console.log(this.form);
			this.$Request
				.fetch_("/api/shopCart/addCart","put",this.form)
				.then((result) => {
					this.$message.success(result.msg);
				})
				.catch((error) => {
					this.$message.error(error);
				});
		}
	}
}
</script>

<style scoped>
.item1{
	padding: 10px;
	color: #666;
}
</style>